<template>
  <div>
    <div>
      <label>用户名:</label><BaseInput v-model="username" ref="useIpt" />
    </div>
    <!-- .native 会把事件绑定给组件的 根元素 -->
    <div>
      <label>密码:</label
      ><BaseInput
        @keyup.enter.native="loginFunc"
        v-model="password"
        type="password"
      />
    </div>
    <div class="bottom-box">
      <BaseCheckBox v-model="isRem">记住账号</BaseCheckBox>
      <div class="right-content">
        <BaseButton @click="loginFunc" type="success">登录</BaseButton>
      </div>
    </div>
  </div>
</template>

<script>
// 导入 axios
// import axios from "axios";
// import ttReq from "@/utils/ttRequest";
import { login } from "@/api/user";
// 导入工具函数
import { setToken } from "@/utils/token";
export default {
  name: "LoginBox",
  data() {
    return {
      isRem: false,
      username: "13532120917",
      password: "246810",
    };
  },
  methods: {
    getFocus() {
    },
    async loginFunc() {
      try {
        // await 会等待 Promise对象成功
        const res = await login(this.username, this.password);
        // console.log('res:', res)
        // 保存 token
        // localStorage.setItem("token", res.data.data.token);
        setToken(res.data.data.token);
        // 跳转
        this.$router.push({ path: "/layout/home" });
      } catch (error) {
        // console.log('error:', error)
        alert(error.response.data.message);
      }
    },
    func() {
      console.log("123");
    },
  },
  mounted() {
    this.getFocus();
  },
  activated() {
    this.getFocus();
  },
};
</script>

<style scoped lang="less">
.bottom-box {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  padding-left: 90px;
}
.login-title {
  color: #252526;
  font-weight: normal;
}

label {
  display: inline-block;
  width: 60px;
  text-align: right;
}
</style>
